<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bd{
            width: 1000px;
            margin: 100px auto;
        }
        .uu {
            list-style: none;
            display: flex;
            flex-flow: row nowrap;
            width: 320px;
            border: 1px solid #bbbbbb;
            overflow: hidden;
        }
        li {
            height: 30px;
            padding: 5px;
            width: 80px;
            text-align: center;
            line-height: 35px;
            position: relative;
            cursor: pointer;
        }
        li:after{
            content: "|";
            position: absolute;
            right: -2px;
            bottom: 0;
            font-size: 10px;
            margin-left: 1px;
            color: #bbbbbb;

        }
        .current:before{
            content: "";
            width: 80px;
            height: 5px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
        .show {
            border: 1px solid #bbbbbb;
        }
       .show div {
            display: none;

        }
        .show .show-current{
            display: block;
        }
    </style>


    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(".uu>li").mouseenter(function () {
                $(this).addClass("current").siblings("li").removeClass("current");
                var index=$(this).index();
                $(".show>div:eq("+index+")").addClass("show-current").siblings("div").removeClass("show-current");
            });
        });
    </script>
</head>
<body>
<div class="bd">
    <ul class="uu">
        <li class="current">国际大牌</li>
        <li >国妆名品</li>
        <li >清洁用品 </li>
        <li >男士用品</li>
    </ul>
    <div class="show">
        <div class="show-current"><img src="imgs/guojidapai.jpg" alt=""></div>
        <div><img src="imgs/guozhuangmingpin.jpg" alt=""></div>
        <div><img src="imgs/qingjieyongpin.jpg" alt=""></div>
        <div><img src="imgs/nanshijingpin.jpg" alt=""></div>
    </div>
</div>
</body>
</html>